<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/component/commonTagLib.jsp" %>

<!DOCTYPE html>
<html>
<head>
    <title><spring:message code="message.title.center_zijueseManage"></spring:message></title>
    <%@ include file="/WEB-INF/component/commonCSS.jsp" %>
</head>
<body class="skin-blue-light sidebar-mini fixed skin-blue-light-frame">
							
    <section class="content-header">
        <h1><spring:message code="message.title.center_zijueseManage"></spring:message></h1>
        <ol class="breadcrumb">
            <li><a href="${ctx}/home.jsp"><i class="fa fa-home"></i><spring:message code="message.lable.first"></spring:message></a></li>
            <li class="active"><a href="#"><spring:message code="message.title.center_jueseManage"></spring:message></a></li>
            <li class="active"><a href="#"><spring:message code="message.title.center_zijueseManage"></spring:message></a></li>
        </ol>
    </section>
    
    <section class="content">
        <div class=" box box-success">
            <div class="box-body">
                <div class="input">
                    <div class="textalign1"><spring:message code="message.lable.zijueseName"></spring:message><spring:message code="message.yanZheng.maoHao"/></div>
                    <div class="boxinput">
                        <input type="text" class="textinput"  id="name" placeholder="<spring:message code="message.lable.zijueseName"></spring:message>" maxlength="50" />
                    </div>
                    <div class="textalign"><spring:message code="message.lable.status"/><spring:message code="message.yanZheng.maoHao"/></div>
                    <div class="boxinput">
                        <select class="textinput"  id="status" name="status"> 
                            <option value=""><spring:message code="message.select.option"/></option>
                            <option value="1"><spring:message code="message.button.start"/></option>
                            <option value="0"><spring:message code="message.button.stop"/></option>
                        </select>
                    </div>
                    <div class="textalign1" >
                    <button type="button" class="btn btn-success btn-sm" onclick="search();"><spring:message code="message.button.seachSpacing"></spring:message></button>
                </div>
                </div>
            </div>
        </div>
        
         <table class="jqgrid" id="gridlist"></table>
        
        <div class=" box box-warning bottongroup">
             <a href="javascript:showDiv();" class="btn btn-primary btn-sm"><spring:message code="message.button.addSpacing"></spring:message></a>
             <label class="btn btn-primary btn-sm" onclick="subChangeStatus(1)"><spring:message code="message.button.startSpacing"></spring:message></label>
             <label class="btn btn-primary btn-sm" onclick="subChangeStatus(0)"><spring:message code="message.button.stopSpacing"></spring:message></label>
        </div>
  
  
  <!-- 新增子角色 -->
         <form id="form" class="form-horizontal" action="zxSaveRole.html" method="post">
        <div class="modal fade" id="useAddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header bg-primary">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						 <h5 class="modal-title"><spring:message code="message.lable.zijuese"></spring:message><span id="addTitle"><spring:message code="message.button.add"></spring:message> </span></h5>
					</div>
					<div class="modal-body">
					<input type="hidden" id="level" name="level" />
					<div class="form-group form-group-xs">
					
						<label for="pid" class="col-sm-2 text-right"><spring:message code="message.lable.fujijuese" /><spring:message code="message.yanZheng.maoHao"/></label>
	                    <div class="col-sm-3 text-left">
	                   		 <select class="form-control" id="selectFather" name="pid" style="width: 140px;"></select>
                 		</div>
                 	 <label for="name" class="col-sm-3 text-right"><span class="required">*</span><spring:message code="message.lable.usernameSpacing"></spring:message><spring:message code="message.yanZheng.maoHao"/></label>
                 	 <div class="col-sm-3 text-left">
                   		<input class="form-control" id="addname" name="name" value="" placeholder="<spring:message code="message.lable.usernameSpacing"></spring:message>" type="text" maxlength="50">
                  	 </div>	  
                  	 
					</div>
                    <div class="form-group form-group-xs">
                        <label for="remark" class="col-sm-2 control-label"><spring:message code="message.lable.remarkBlank"></spring:message><spring:message code="message.yanZheng.maoHao"/></label>
                        <div class="col-sm-9">
                            <textarea class="form-control" id="remark" name="remark" rows="4" placeholder="<spring:message code="message.lable.remarkBlank"></spring:message>" maxlength="500">${user.remark}</textarea>
                        </div>
                    </div>
					
					</div>
				<div class="modal-footer">
						<button type="button" class="btn btn-primary btn-sm" onclick="subSaveUser();"><spring:message code="message.button.saveSpacing"></spring:message></button>
						<button type="button" class="btn btn-danger btn-sm" id="close" data-dismiss="modal"><spring:message code="message.button.closeSpacing"></spring:message></button>
					</div>	
			</div>
		</div>
	</div>     
	</form>  
	
	 <!-- 编辑子角色 -->
         <form id="editForm" class="form-horizontal" action="zxSaveRole.html" method="post">
        <div class="modal fade" id="useEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header bg-primary">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						 <h5 class="modal-title"><spring:message code="message.lable.zijuese"></spring:message><span id="addTitle"><spring:message code="message.button.edit"></spring:message> </span></h5>
					</div>
					<div class="modal-body">
					<div class="form-group form-group-xs">
					<input type="hidden" id="editid" name="id">
					<input type="hidden" id="selectEditFather" name="pid" />
					<input type="hidden" id="editLevel" name="level" />
					</div>
						<div class="form-group form-group-xs">
							 <label for="name" class="col-sm-2 text-right"><span class="required">*</span><spring:message code="message.lable.usernameSpacing"></spring:message><spring:message code="message.yanZheng.maoHao"/></label>
                          	 <div class="col-sm-3 text-left">
                            	<input class="form-control" id="editname" name="name" value="" placeholder="<spring:message code="message.lable.usernameSpacing"></spring:message>" type="text" maxlength="50" >
                           	 </div>
                           	  <label for="status" class="col-sm-3 text-right"><span class="required">*</span><spring:message code="message.lable.status"></spring:message><spring:message code="message.yanZheng.maoHao"/></label>
                        <div class="col-sm-3 text-left">
                            <select class="form-control" id="editstatus" name="status">
                            	<option value="1"><spring:message code="message.button.start"></spring:message></option>
                            	<option value="0"><spring:message code="message.button.stop"></spring:message></option>
                            </select>
                        </div>
						</div>
                    <div class="form-group form-group-xs">
                        <label for="remark" class="col-sm-2 control-label"><spring:message code="message.lable.remarkSpacing"></spring:message><spring:message code="message.yanZheng.maoHao"/></label>
                        <div class="col-sm-9">
                            <textarea class="form-control" id="editremark" name="remark" rows="4" placeholder="<spring:message code="message.lable.remarkSpacing"></spring:message>" maxlength="500">${user.remark}</textarea>
                        </div>
                    </div>
					
					</div>
				<div class="modal-footer">
						<button type="button" class="btn btn-primary btn-sm" onclick="subEditSaveRole();"><spring:message code="message.button.save"></spring:message></button>
						<button type="button" class="btn btn-danger btn-sm" id="close" data-dismiss="modal"><spring:message code="message.button.close"></spring:message></button>
					</div>	
			</div>
		</div>
	</div>     
	</form>  
    </section>
    
    <%@ include file="/WEB-INF/component/commonJS.jsp" %>
    <script type="text/javascript">
    $(function(){
    	
    	$("#name").focus();//加载页面光标在第一个查询框内
    	
    	
		   $('.form-inline :input').bind('keydown', function(event) {if (event.keyCode == "13") {search();}}).eq(0).focus();
	 })
    
    	var colorList = [];
    	function search(page) {
    		var name = $.trim($("#name").val());
    		var status = $.trim($("#status").val());
    		$("#gridlist").jqGrid('setGridParam',{  
    	        datatype:'json',
    	        postData:{"name":name,
    	        	"status":status	
    	        },
    	        page : (page || 1)
    	    }).trigger("reloadGrid"); //重新载入  
    	}
    	
    	function subRolePrivilege(id,name){
            $.HN.dialog.open({
                id:id,
                title:name,
                url:"${ctx}/sysPrivilege/subRolePrivilege.html?roleId="+id,
                width:"800px",
                height:"550px",
                closefunc:function(){
                    // search();
                }
            });
        }
    	
    	function subRolePrivilegeAsRead(id,name){
            $.HN.dialog.open({
                id:id,
                title:name,
                url:"${ctx}/sysPrivilege/subRolePrivilegeAsRead.html?roleId="+id,
                width:"800px",
                height:"550px",
                closefunc:function(){
                    // search();
                }
            });
        }
    
        $(function () {
            $("#gridlist").jqGrid({
            	treeGrid: true,  
	            treeGridModel: 'adjacency', //treeGrid模式，跟json元數據有關 ,adjacency/nested  
	            ExpandColumn : 'userName',
                url: "getZxSubRoleList.html",
                mtype: "post",
                postData:{
                	"main":0,
                	n_level:-1 
                	},
                datatype: "json",
                autowidth: true,
                height: 310,
                colNames: ['',
                           '<spring:message code="message.jqGrid.cz"></spring:message>',
                           '<spring:message code="message.lable.zijueseName"></spring:message>',
                           '<spring:message code="message.lable.status"></spring:message>',
                           '',
                           '<spring:message code="message.lable.type"></spring:message>',
                           '<spring:message code="message.lable.remark"></spring:message>'],
                colModel: [
					{ name: 'check', width: 1, align:"center", sortable: false,
						formatter : function(val, opts, rowdata) {
							if(rowdata.type == 0){
								return "";
							}
							if(rowdata.type == 1){
								return "<input type='checkbox' id='w"+rowdata.id+"' class='item c" + rowdata.pid + "' name='check' value='"+rowdata.id+"' onclick='changeColor(this);'/><input type='hidden' id='h"+rowdata.id+"' value='"+rowdata.id+"'/><input type='hidden' id='s"+rowdata.id+"' value='"+rowdata.status+"'/><input type='hidden' id='n"+rowdata.id+"' value='"+rowdata.userName+"'/><input type='hidden' id='m"+rowdata.id+"' value='"+rowdata.level+"'/><input type='hidden' id='l"+rowdata.id+"' value='"+rowdata.pid+"'/>";
							}
						}
					},
                    { name: 'operate', width: 4, align:"center", sortable: false,
	                    formatter : function(val, opts, rowdata) {
	                    	return "<a href='javascript:subRolePrivilege(\""+rowdata.id+"\", \""+rowdata.userName+"\");'style='background:url(${ctx}/lib/img/icon/icon.png) no-repeat -60px -80px' class='opIcon' title='<spring:message code='message.lable.role' />'></a>";
	                    	if(rowdata.type == 1){
	                    		 var str =  "<a href='javascript:editDiv(1,\""+rowdata.id+"\");' style='background:url(${ctx}/lib/img/icon/icon.png) no-repeat 0px 0px' class='opIcon' title='编辑'></a>";
	 					        str += "<a href='javascript:subRolePrivilege(\""+rowdata.id+"\", \""+rowdata.userName+"\");'style='background:url(${ctx}/lib/img/icon/icon.png) no-repeat -60px -80px' class='opIcon' title='<spring:message code='message.lable.role' />'></a>"
	 	    	               return str;
	                    	}else{
	                    		return "<a href='javascript:subRolePrivilegeAsRead(\""+rowdata.id+"\", \""+rowdata.userName+"\");'style='background:url(${ctx}/lib/img/icon/icon.png) no-repeat -180px -20px' class='opIcon' title='<spring:message code='message.label.privLook' />'></a>";
	                    	}
    	                 
	                }},
	                { name: 'userName', width: 10, align:"left", sortable: false},
                    { name: 'status', width: 5, align: 'center', sortable: false,
	                	formatter : function(val,opts,row){
	                    	if(val==1){
	                    		return "<spring:message code="message.button.start"></spring:message>";
	                    	}else if(val==0){
	                    		return "<span class='red'><spring:message code="message.button.stop"></spring:message></span>";
	                    	}
	                    }		
                    },
                    { name: 'id', width: 10, align:"center",hidden:true, sortable: false},
                    { name: 'type', width: 5, align: 'center', sortable: false,
                    	formatter : function(val,opts,row){
	                    	if(val==0){
	                    		return "<spring:message code="message.lable.system"></spring:message>";
	                    	}else if(val==1){
	                    		return "<spring:message code="message.lable.noSystem"></spring:message>";
	                    	}
	                    }		
                    },
                    { name: 'remark', width: 15, align:"left", sortable: false}
                   
                ],
                pager: "false", 
                jsonReader: {    
                    root: "rows",  
                    total: "total",    
                    repeatitems: true    
                }, 
                treeReader : {  
                    level_field: "level",  
                    parent_id_field: "pid",   
                    leaf_field: "leaf",  
                    expanded_field: "expanded"  
                  }, 
                caption: "<spring:message code="message.title.center_zijueseManage"></spring:message>",
                gridComplete: function(){
                	   selectByOneData("gridlist");

                	//保存每一行原来的颜色
                	$("input[name='check']").each(function(){
                		var flag = true;
                		for(var i = 0;i<colorList.length;i++){
                			if($(this).prop("id")==colorList[i].id){
                				flag = false;
                 				break;
                 			}
                		}
                		if(flag){
                			colorList.push({"id":"w"+$(this).val(),"color":$("#"+$(this).val()).css("background-color")});
                		}
                		
   	        		});
                	
                	//避免手动扩展grid自动带入查询参数
                	$("#gridlist").jqGrid('setGridParam',{postData:{"name":""}});  
    	    	    
                	// 联动
                	/*
                	$("input[type='checkbox'].item").click(function() {
                		var id = $(this).attr("id") || "";
                		var cls = $(this).attr("class") || "";
                		if (id.length > 0) {
                			id = id.substring(1, id.length);
                		}
                		if (cls.length > 6) {
                			cls = cls.substring(6, cls.length);
                		}
                		if ($(this).is(":checked")) {
                			$("input[type='checkbox'].item.c" + id).prop("checked", true);
                			if ($("input[type='checkbox'].item.c" + cls + ":not(:checked)").length == 0) {
                				$("input[type='checkbox'].item#w" + cls).prop("checked", true);
                			}
                		} else {
                			$("input[type='checkbox'].item.c" + id).prop("checked", false);
                			if ($("input[type='checkbox'].item.c" + cls + ":not(:checked)").length > 0) {
                                $("input[type='checkbox'].item#w" + cls).prop("checked", false);
                            }
                		}
                	});
                	*/
                	
                },
                onSelectRow : function(id) {
                	if ($("#w" + id).is(":checked")) {
                		$("#w" + id).prop("checked", false);
                	} else {
                		$("#w" + id).prop("checked", true);
                	}
                }
            });
            
            //生成能选择所有的复选框
            $("#jqgh_gridlist_check").remove();
            $("#gridlist_check").append("<input type='checkbox'  id='checkAll'  />");
            
            //选择所有
           $("#checkAll").click(function(){
	                if($(this).is(':checked')){ 
	                	$("input[name='check']").each(function(){
	   	        		 	$(this).prop("checked",true);//设置选中
	   	        		 	$("#"+$(this).val()).css("background-color","#F4D0D7");//设置改变颜色
	   	        		});
	                }else{    
	                	$("input[name='check']").each(function(){
	                		$(this).prop("checked",false);//设置不选中
	                		for(var i = 0;i<colorList.length;i++){
	                			if($(this).prop("id")==colorList[i].id){
	                				$("#"+$(this).val()).css("background-color",colorList[i].color);//当不选中状态时，行的颜色变回原来的
	                				break;
	                			}
	                		}
	   	        		 	
	   	        		 	
	   	        		});
	                }    
           }); 
            
            $("#selectFather").change(function() {
            	if ($(this).val() == null || $(this).val() == "") {
            		$("#level").val(2);
            	} else {
            		$("#level").val(3);
            	}
            });
            
        });
            
        //选中复选框，当前行改变颜色
        function changeColor(obj){
        	if ($(obj).is(':checked')) {
        		$("#"+$(obj).val()).css("background-color","#F4D0D7");
    		 }else{
    			 for(var i = 0;i<colorList.length;i++){
         			if($(obj).prop("id")==colorList[i].id){
         				$("#"+$(obj).val()).css("background-color",colorList[i].color);//当不选中状态时，行的颜色变回原来的
         				break;
         			}
         		}
    		 }
        	
        }
        
        //停用;启用
        function subChangeStatus(status){
        	var msg = "<spring:message code="message.button.stop"></spring:message>";
        	var url= "${ctx}/sysRole/disable.html";
        	if(status==1){
        		msg = "<spring:message code="message.button.start"></spring:message>";
        		url= "${ctx}/sysRole/enable.html";
        	}
        	var list = [];
        	$("input[name='check']").each(function(){
        		 if ($(this).is(':checked')) {
        	        list.push($("#h"+$(this).val()).val());
        		 } 
        	});
        	
        	if (list.length <= 0) {
				top.$.alert("<spring:message code="message.HN.alert.selectCZzijuese"></spring:message><spring:message code="message.yanZheng.ganTanHao"/>", "warn");
				return;
			}
        	//
        	var list = [];
        	var delList = [];
        	var allList = [];
        	var data = "";
        	var strlevel = "";
        	var fatherid ="";
        	$("input[name='check']").each(function(){
        		 if ($(this).is(':checked')) {
        			 if($("#s"+$(this).val()).val()==status){
        				 delList.push($(this).val());
        			 }else{
        				 if($("#m"+$(this).val()).val() == 2 && status == 0){
        					 strlevel = "<spring:message code="message.lable.allzijuese"></spring:message>";
        					 fatherid = $("#h"+$(this).val()).val();
        					 $(this).prop("checked",true);//设置选中
        				 }
        				 if(fatherid ==  $("#l"+$(this).val()).val()){
    						 allList.push($(this).val()); 
    					 }
        				 list.push({"id":$("#h"+$(this).val()).val(),"status":status,"level":$("#m"+$(this).val()).val()});
        				 data += $("#n"+$(this).val()).val()+strlevel+", ";
        				 strlevel = "";
        			 }
        		 } 
        	});
        	if (list.length <= 0) {
        		top.$.alert("<spring:message code="message.lable.ninXuanZe" /><spring:message code="message.lable.zijuese" /><spring:message code="message.lable.yiJingShi" />"+msg+"<spring:message code="message.lable.zhuangTaiGTH" />", "warn"); 
				if($("#checkAll").prop("checked")){
					$("#checkAll").click();
				}else{
					for(var i = 0;i<delList.length;i++){
						$("#w"+delList[i]).click();
					}
				}
				
				return;
			}
        	data = data.substring(0,data.length-2);
        	
        	for(var i = 0;i<allList.length;i++){
				$("#w"+allList[i]).click();
			}
        	for(var i = 0;i<delList.length;i++){
				$("#w"+delList[i]).click();
			}
        	$.HN.message.confirm("<spring:message code="message.lable.OKYES"></spring:message>"+msg+"<spring:message code="message.label.flowerRole"></spring:message>？<br/>"+data, '', '').on(function (e) {
	            if (e) {
	            	$.post(url, {
	        			"array" : json.jsonToString(list)
	        		}, function(result) {
	        			if (result.success) {
	        				var curpage = $("#gridlist").jqGrid('getGridParam', 'page');
	        				search(curpage);
	        				top.$.HN.message.alert("<spring:message code="message.HN.alert.success"></spring:message><spring:message code="message.yanZheng.ganTanHao"/>","success");
	        			} else {
	        				top.$.HN.message.alert("<spring:message code="message.HN.alert.fail"></spring:message><spring:message code="message.yanZheng.ganTanHao"/>","error");
	        			}
	        		}, "json").error(function(err) {
	        			top.window.document.location = "${ctx}/login.html"; 
	        		});
	            }
        	});
        }
        
        function showDiv(){
        	$("#selectFather").HNSelect({
                url: "${pageContext.request.contextPath}/sysRole/getFatherList.html", data: { ID: '' }, defaultText: "<option value='' ><spring:message code="message.select.option" /></option>",
            })
            $("#addname").val("");
            $("#addstatus").val("");
        	$("#editname").val("");
        	$("#editstatus").val("");
        	$('#useAddModal').modal({
                keyboard: true
            });
        }   
        
        //  保存用户信息
    	function subSaveUser() {
    		if (!valiAdddate()) {
    			return;
    		}
    		$("#form").ajaxSubmit({
    			dataType : "json",
    			success : function(result, statusText) {
    				if (result.success) {
    					$('#useAddModal').modal('hide');
    					search(1);
    					top.$.HN.message.alert("<spring:message code="message.HN.alert.success" /><spring:message code="message.yanZheng.ganTanHao"/>", "success");
    				} else {
    					top.$.HN.message.alert(result.msg || "<spring:message code="message.HN.alert.fail" />", "", "error");
    				}
    			}
    		});
    	}
    	//    	保存用户信息
    	function subEditSaveRole() {
    		if (!valiEditdate()) {
    			return;
    		}
    		$.HN.message.confirm("<spring:message code="message.HN.alert.OkSaveYESorNO" />？", '', '').on(function (e) {
	            if (e) {
		    		$("#editForm").ajaxSubmit({
		    			dataType : "json",
		    			success : function(result, statusText) {
		    				if (result.success) {
		    					$('#useEditModal').modal('hide');
		    					search(1);
		    					top.$.HN.message.alert("<spring:message code="message.HN.alert.success" /><spring:message code="message.yanZheng.ganTanHao"/>", "success");
		    				} else {
		    					top.$.HN.message.alert(result.msg || "<spring:message code="message.HN.alert.fail" />", "error");
		    				}
		    			}
		    		});
	            }
    		});
    	}
    	
    	function editDiv(opType,id,userType){
       		$.post("${ctx}/sysRole/zxSubRoleEdit.html", {
       			opType : opType,
       			id : id
       		}, function(result) {
       			if (result != null ) {
      					$("#editid").val(result.id);
          				$("#editname").val(result.name);
          				$("#editstatus").val(result.status);
          				$("#editremark").val(result.remark);
          				$("#selectEditFather").val(result.pid); 
          				$("#editLevel").val(result.level);
       			}
       			$('#useEditModal').modal({
                    keyboard: true
                });
       		}, "json");
        }
        
    	
    	//	校验子角色信息
    	function valiAdddate() {
    		var name = $.trim($("#addname").val());
    		if (name == null || name == "") {
    			top.$.alert("<spring:message code="message.HN.alert.pleaseInputJSName"></spring:message><spring:message code="message.yanZheng.ganTanHao"/>", "warn");
    			return false;
    		}
    		return true;
    	}
//    	校验子角色信息
    	function valiEditdate() {
    		var name = $.trim($("#editname").val());
    		if (name == null || name == "") {
    			top.$.alert("<spring:message code="message.HN.alert.pleaseInputJSName"></spring:message><spring:message code="message.yanZheng.ganTanHao"/>", "error");
    			return false;
    		}
    		return true;
    	}
    </script>
</body>
</html>












